<!doctype html>
<html>
  <head>
    <title>Two.js: Zoomable User-Interface</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="image_src" href="../images/logo.gif" />
    <link rel="shortcut icon" type="image/gif" href="../images/favicon.gif">
    <script src="../third-party/url.js"></script>
    <script src="../third-party/jquery.js"></script>
    <script src="../third-party/underscore.js"></script>
    <script src="../third-party/two.js"></script>
    <script src="../third-party/extras/zui.js"></script>
  </head>
  <body>
    <div class="scripts">
      <script>

        $(function() {

          var type = /(canvas|webgl)/.test(url.type) ? url.type : 'svg';
          var two = new Two({
            type: Two.Types[type],
            fullscreen: true,
            autostart: true
          }).appendTo(document.body);

          _.each(_.range(500), function(i) {
            var shape = two.makeRectangle(Math.random() * two.width * 2 - two.width / 2, Math.random() * two.height * 2 - two.height / 2, 50, 50);
            shape.noStroke().fill = getRandomColor();
            shape.rotation = Math.random() * Math.PI * 2;
          });

          var zui = new Two.ZUI(two.scene);
          zui.addLimits(0.06, 8);

          // TODO: Add pinch-to-zoom for mobile.

          var $stage = $(two.renderer.domElement);
          $stage.bind('mousewheel wheel', function(event) {

            var e = event.originalEvent;
            e.stopPropagation();
            e.preventDefault();

            var dy = (e.wheelDeltaY || - e.deltaY) / 1000;

            zui.zoomBy(dy, e.clientX, e.clientY);

          });

        });

        function getRandomColor() {
          return 'rgb('
            + Math.floor(Math.random() * 255) + ','
            + Math.floor(Math.random() * 255) + ','
            + Math.floor(Math.random() * 255) + ')';
        }

      </script>
    </div>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-40550435-1', 'github.com');
      ga('send', 'pageview');

    </script>
  </body>
</html>
